<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头条热榜</title>
    <style>
        *{
            list-style: none;
        }
        li{
            margin-bottom: 20px;   
        }
        .title{
            font-size: 16px;
            line-height: 16px;
        }
        .order{
            font-weight: bold;
            color: #999;
            font-family: ByteNumber-center;
            font-size: 20px;
        }
        .hot{
            background: rgb(201, 22, 22);
            font-size: 10px;
            padding: 3px 5px;
            color: white;
        }

        .num-1{
            color: #a82e2e;
        }
        .num-2{
            color: #f04142;
        }
        .num-3{
            color: #ff9a03
        }
    </style>
</head>
<body>
    
    <div id="root"></div>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        // https://www.toutiao.com/
        let data = [
            {id:1, title: '全网帮全红婵圆梦', is_hot: true, is_new: false},
            {id:2, title: '意外“金”喜！刘诗颖标枪夺冠', is_hot: true, is_new: false},
            {id:3, title: '中国队获乒乓球男团金牌', is_hot: true, is_new: false},
            {id:4, title: '感染护士参加800人婚宴？官方回应', is_hot: false, is_new: false},
            {id:5, title: '中国男子百米接力夺得第4名', is_hot: false, is_new: true},
            {id:6, title: '全红婵夺冠 郭晶晶现场追星', is_hot: true, is_new: false},
            {id:7, title: '全红婵获奖豪宅+商铺+20万现金', is_hot: true, is_new: false},
            {id:8, title: '中国南海军事演习引发海外关注', is_hot: false, is_new: false},
            {id:9, title: '武汉本轮输入性疫情源头查明', is_hot: true, is_new: false},
        ];

        //创建虚拟 DOM
        /*
        class HotBang extends React.Component{
            render(){
                return (
                    <div>
                        <h2>头条热榜</h2>    
                        <ul>
                            {
                                data.map((item, index) => {
                                    //变量
                                    let color = '#999';
                                    //判断 id
                                    if(item.id === 1){
                                        color = '#a82e2e';
                                    }else if(item.id === 2){
                                        color='#f04142';
                                    }else if(item.id === 3){
                                        color = '#ff9a03';
                                    }

                                    return <li key={index}>
                                            <span className="order" style={{color: color}}>{item.id}</span> &nbsp;&nbsp;
                                            <span className="title">全红婵夺冠 {item.title}</span>
                                            &nbsp;&nbsp;  {item.is_hot && <span className="hot">热</span>} 
                                            </li>;
                                })
                            }
                                
                        </ul>
                    </div>
                );
            }
        }
        */

        //单条新闻结构组件封装
        class News extends React.Component{

            render(){
                //获取组件标签上的属性信息
                let {id, title, is_hot, is_new} = this.props;
                return <li>
                        <span className={"order num-"+id}>{id}</span> &nbsp;&nbsp;
                        <span className="title"> {title}</span>
                        &nbsp;&nbsp;  {is_hot && <span className="hot">热</span>} 
                    </li>;
            }
        }

        //整体排行榜组件
        class HotBang extends React.Component{
            render(){
                return (
                    <div>
                        <h2>头条热榜</h2>    
                        <ul>
                            {
                                data.map((item, index) => {
                                    //变量
                                    return <News key={index}  {...item} />
                                })
                            }
                                
                        </ul>
                    </div>
                );
            }
        }

        ReactDOM.render(<HotBang />, document.querySelector('#root'));
    </script>
</body>
</html>